<template>
  <div>
    <!-- 搜索 -->
    <Search
      v-model="queryModel.query"
      :loading="queryloading"
      @search="getGoodsList()"
      @click="
        model = {};
        $refs.dia.show();
      "
    >
      添加商品
    </Search>

    <Table
      :data="list"
      border
      :total="total"
      :cols="cols"
      v-model="queryModel"
      @change="getGoodsList"
    >
      <template v-slot:timer="{ row: { add_time } }">
        {{ new Date(add_time * 1000).format() }}
      </template>
      <template v-slot:action="{ row }">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-edit"
          @click="
            model = { ...row };
            $refs.dia.show();
          "
          >编辑</el-button
        >
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="getdelGoods(row)"
          >删除</el-button
        >
      </template>
    </Table>

    <!-- 添加框 -->
    <DF
      :title="title + '商品'"
      ref="dia"
      v-model="model"
      :opts="opts"
      @confirm="getaddGoods"
    />
  </div>
</template>

<script>
import { goodslist, addGoods, updataGoods, delGoods } from "api/goods";
import { queryMixin } from "@/mixin/baseMixin";

export default {
  mixins: [queryMixin],
  name: "users",
  data() {
    return {
      /**
       * 表格配置项
       */
      cols: [
        {
          type: "index",
          title: "#",
        },
        {
          name: "goods_name",
          title: "商品名称",
        },
        {
          name: "goods_price",
          title: "商品价格",
          width: "130",
        },
        {
          name: "goods_weight",
          title: "商品重量",
          width: "130",
        },
        {
          // name:"add_time",
          title: "创建时间",
          slot: "timer",
          width: "180",
        },
        {
          title: "操作",
          slot: "action",
          width: "200",
        },
      ],
      /**
       * 添加商品数据
       */
      model: {},
    };
  },
  methods: {
    /**
     * 删除商品
     */
    async getdelGoods({ goods_id, goods_name }) {
      let res;
      try {
        res = await this.$myconfirm(`您确定要删除【${goods_name}】吗？`);
        await delGoods(goods_id);
        this.getGoodsList();
        this.$m.success("商品删除成功");
      } catch (error) {}
      res && res();
    },
    /**
     * 添加商品
     */
    async getaddGoods() {
      const dd = this.$refs.dia;
      try {
        dd.start();
        this.model.pics =
          this.model.pics?.map((c) => ({
            pic: c.response.data.tmp_path,
          })) ?? [];
        await (this.model.goods_id ? updataGoods : addGoods)(this.model);
        dd.hide();
        this.$m.success("商品" + this.title + "成功");
        this.getGoodsList();
      } catch (error) {
        console.log(error);
      }
      dd.stop();
    },
    /**
     * 获取数据
     */
    async getGoodsList() {
      try {
        this.queryloading = true;
        const { total, goods } = await goodslist(this.queryModel);
        this.list = goods;
        this.total = total;
      } catch (error) {}
      this.queryloading = false;
    },
  },
  created() {
    this.getGoodsList();
  },
  computed: {
    /**
     * 表单配置项
     */
    opts() {
      return {
        goods_name: {
          required: true,
          title: "商品名称",
          min: 5,
          rules: [{ max: 50 }],
        },
        goods_price: {
          required: true,
          title: "商品价格",
          type: "Number",
        },
        goods_number: {
          required: true,
          title: "商品数量",
          type: "Number",
        },
        goods_weight: {
          required: true,
          title: "商品重量",
          type: "Number",
        },
        ...(this.model.goods_id
          ? {}
          : {
              pics: {
                title: "上传图片",
                tag: "upload",
                url: "/shi/upload",
                headers: {
                  Authorization: this.$store.getters.token,
                },
              },
            }),
      };
    },
    /**
     * 标题
     */
    title() {
      return this.model.goods_id ? "修改" : "添加";
    },
  },
};
</script>

<style lang="scss" scoped>
.searchbox {
  display: flex;
  .input {
    width: 368px;
    margin-right: 15px;
  }
}
.el-pagination {
  margin-top: 10px;
}
.el-table {
  margin-top: 10px;
}
</style>